<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Traval</title>
		<link rel="stylesheet" type="text/css" href="css/bg.css" />
		<link rel="stylesheet" type="text/css" href="css/title.css" />
		<link rel="stylesheet" type="text/css" href="css/mainbody.css" />
		<link rel="stylesheet" type="text/css" href="css/footer.css"/>
	</head>
	<body>
		<div class="container">
			<!-- 导航栏 -->
			<div class="title">
				<div class="navbar">
					<img class="logo" src="img/logo.png">
					<div class="left">
						<a href="#" class="item"><span class="iconfont">&#xe620;</span>&nbsp;&nbsp;首页
							<i class="nav_hover"></i>
						</a><a href="views_scenery.html" class="item"><span class="iconfont">&#xe64a;</span>&nbsp;&nbsp;推荐
							<i class="nav_hover"></i>
						</a><a href="views_foods.html" class="item"><span class="iconfont2">&#xe61c;</span>&nbsp;&nbsp;美食
							<i class="nav_hover"></i>
						</a><a href="views_write.html" class="item"><span class="iconfont">&#xe61d;</span>&nbsp;&nbsp;游记
							<i class="nav_hover"></i>
						</a>
					</div>
					<div class="right">
						<input class="searchbox" type="text" placeholder="输入关键字..." /><a href="#" class="searchicon iconfont">&#xe63c;
						</a><a href="login.html" class="item"><span class="iconfont">&#xe662;&nbsp;</span>注册
							<i class="nav_hover"></i>
						</a><a href="login.html" class="item"><span class="iconfont" style="font-size: 20px;">&#xe60c;</span>登录&nbsp;&nbsp;
							<i class="nav_hover"></i>
						</a>
					</div>
					<div></div>
				</div>
			</div>
			<!-- 主体 -->
			<div class="main_body">
				<div class="banner">
					<ul>
						<li><img src="img/banner01.jpg"></li>
						<li><img src="img/banner02.jpg"></li>
						<li><img src="img/banner03.jpg"></li>
						<li><img src="img/banner04.jpg"></li>
					</ul>
				</div>
				<!-- hotbox01 -->
				<div class="hotbox">
					<div class="hottitle">
						<span class="iconfont">&#xe82a;热门推荐</span>
						<ul>
							<li class="iconfont" value="1" onclick="oncliktab(this.value)">&#xe67e;景点</li>
							<!-- 
						-->
							<li class="iconfont" value="2" onclick="oncliktab(this.value)" >&#xe63f;美食</li>
							<!-- 
						-->
							<li class="iconfont" value="3" onclick="oncliktab(this.value)">&#xe646;酒店</li>
						</ul>
					</div>
					<div class="itembox">
						<a href="">
							<div class="item">
								<img src="https://picsum.photos/360/460?random=1">
								<div class="pname">想去这里么？<span class="iconfont">&#xe64d; 想去!</span></div>
								<div class="looking">
									<span class="iconfont">&#xe62f; 123</span>
									<span class="iconfont">&#xe6cb; 123</span>
									<span class="iconfont">&#xe82a; 123</span>
								</div>
							</div>
						</a>
						<a href="">
							<div class="item">
								<img src="https://picsum.photos/360/460?random=2">
								<div class="pname">想去这里么？<span class="iconfont">&#xe64d; 想去!</span></div>
								<div class="looking">
									<span class="iconfont">&#xe62f; 123</span>
									<span class="iconfont">&#xe6cb; 123</span>
									<span class="iconfont">&#xe82a; 123</span>
								</div>
							</div>
						</a>
						<a href="">
							<div class="item">
								<img src="https://picsum.photos/360/460?random=3">
								<div class="pname">想去这里么？<span class="iconfont">&#xe64d; 想去!</span></div>
								<div class="looking">
									<span class="iconfont">&#xe62f; 123</span>
									<span class="iconfont">&#xe6cb; 123</span>
									<span class="iconfont">&#xe82a; 123</span>
								</div>
							</div>
						</a>
						<a href="">
							<div class="item">
								<img src="https://picsum.photos/360/460?random=4">
								<div class="pname">想去这里么？<span class="iconfont">&#xe64d; 想去!</span></div>
								<div class="looking">
									<span class="iconfont">&#xe62f; 123</span>
									<span class="iconfont">&#xe6cb; 123</span>
									<span class="iconfont">&#xe82a; 123</span>
								</div>
							</div>
						</a>
						<a href="">
							<div class="item">
								<img src="https://picsum.photos/360/460?random=5">
								<div class="pname">想去这里么？<span class="iconfont">&#xe64d; 想去!</span></div>
								<div class="looking">
									<span class="iconfont">&#xe62f; 123</span>
									<span class="iconfont">&#xe6cb; 123</span>
									<span class="iconfont">&#xe82a; 123</span>
								</div>
							</div>
						</a>
						<a href="">
							<div class="item">
								<img src="https://picsum.photos/360/460?random=6">
								<div class="pname">想去这里么？<span class="iconfont">&#xe64d; 想去!</span></div>
								<div class="looking">
									<span class="iconfont">&#xe62f; 123</span>
									<span class="iconfont">&#xe6cb; 123</span>
									<span class="iconfont">&#xe82a; 123</span>
								</div>
							</div>
						</a>
						<a href="">
							<div class="item">
								<img src="https://picsum.photos/360/460?random=7">
								<div class="pname">想去这里么？<span class="iconfont">&#xe64d; 想去!</span></div>
								<div class="looking">
									<span class="iconfont">&#xe62f; 123</span>
									<span class="iconfont">&#xe6cb; 123</span>
									<span class="iconfont">&#xe82a; 123</span>
								</div>
							</div>
						</a>
						<a href="">
							<div class="item">
								<img src="https://picsum.photos/360/460?random=8">
								<div class="pname">想去这里么？<span class="iconfont">&#xe64d; 想去!</span></div>
								<div class="looking">
									<span class="iconfont">&#xe62f; 123</span>
									<span class="iconfont">&#xe6cb; 123</span>
									<span class="iconfont">&#xe82a; 123</span>
								</div>
							</div>
						</a>
						<a href="">
							<div class="item">
								<img src="https://picsum.photos/360/460?random=81">
								<div class="pname">想去这里么？<span class="iconfont">&#xe64d; 想去!</span></div>
								<div class="looking">
									<span class="iconfont">&#xe62f; 123</span>
									<span class="iconfont">&#xe6cb; 123</span>
									<span class="iconfont">&#xe82a; 123</span>
								</div>
							</div>
						</a>
					</div>
				</div>
				<!-- hotbox02 -->
				<div class="hotbox">
					<div class="hottitle">
						<span class="iconfont">&#xe63f;热门美食</span>
						<ul>
							<li class="iconfont" value="1" onclick="oncliktab(this.value)">&#xe67e;景点</li>
							<!-- 
				-->
							<li class="iconfont" value="2" onclick="oncliktab(this.value)">&#xe63f;美食</li>
							<!-- 
				-->
							<li class="iconfont" value="3" onclick="oncliktab(this.value)">&#xe646;酒店</li>
						</ul>
					</div>
					<div class="itembox">
						<a href="">
							<div class="item">
								<img src="https://picsum.photos/360/460?random=11">
								<div class="pname">想去这里么？<span class="iconfont">&#xe64d; 想去!</span></div>
								<div class="looking">
									<span class="iconfont">&#xe62f; 123</span>
									<span class="iconfont">&#xe6cb; 123</span>
									<span class="iconfont">&#xe82a; 123</span>
								</div>
							</div>
						</a>
						<a href="">
							<div class="item">
								<img src="https://picsum.photos/360/460?random=22">
								<div class="pname">想去这里么？<span class="iconfont">&#xe64d; 想去!</span></div>
								<div class="looking">
									<span class="iconfont">&#xe62f; 123</span>
									<span class="iconfont">&#xe6cb; 123</span>
									<span class="iconfont">&#xe82a; 123</span>
								</div>
							</div>
						</a>
						<a href="">
							<div class="item">
								<img src="https://picsum.photos/360/460?random=33">
								<div class="pname">想去这里么？<span class="iconfont">&#xe64d; 想去!</span></div>
								<div class="looking">
									<span class="iconfont">&#xe62f; 123</span>
									<span class="iconfont">&#xe6cb; 123</span>
									<span class="iconfont">&#xe82a; 123</span>
								</div>
							</div>
						</a>
						<a href="">
							<div class="item">
								<img src="https://picsum.photos/360/460?random=44">
								<div class="pname">想去这里么？<span class="iconfont">&#xe64d; 想去!</span></div>
								<div class="looking">
									<span class="iconfont">&#xe62f; 123</span>
									<span class="iconfont">&#xe6cb; 123</span>
									<span class="iconfont">&#xe82a; 123</span>
								</div>
							</div>
						</a>
						<a href="">
							<div class="item">
								<img src="https://picsum.photos/360/460?random=55">
								<div class="pname">想去这里么？<span class="iconfont">&#xe64d; 想去!</span></div>
								<div class="looking">
									<span class="iconfont">&#xe62f; 123</span>
									<span class="iconfont">&#xe6cb; 123</span>
									<span class="iconfont">&#xe82a; 123</span>
								</div>
							</div>
						</a>
						<a href="">
							<div class="item">
								<img src="https://picsum.photos/360/460?random=66">
								<div class="pname">想去这里么？<span class="iconfont">&#xe64d; 想去!</span></div>
								<div class="looking">
									<span class="iconfont">&#xe62f; 123</span>
									<span class="iconfont">&#xe6cb; 123</span>
									<span class="iconfont">&#xe82a; 123</span>
								</div>
							</div>
						</a>
						<a href="">
							<div class="item">
								<img src="https://picsum.photos/360/460?random=77">
								<div class="pname">想去这里么？<span class="iconfont">&#xe64d; 想去!</span></div>
								<div class="looking">
									<span class="iconfont">&#xe62f; 123</span>
									<span class="iconfont">&#xe6cb; 123</span>
									<span class="iconfont">&#xe82a; 123</span>
								</div>
							</div>
						</a>
						<a href="">
							<div class="item">
								<img src="https://picsum.photos/360/460?random=88">
								<div class="pname">想去这里么？<span class="iconfont">&#xe64d; 想去!</span></div>
								<div class="looking">
									<span class="iconfont">&#xe62f; 123</span>
									<span class="iconfont">&#xe6cb; 123</span>
									<span class="iconfont">&#xe82a; 123</span>
								</div>
							</div>
						</a>
						<a href="">
							<div class="item">
								<img src="https://picsum.photos/360/460?random=84">
								<div class="pname">想去这里么？<span class="iconfont">&#xe64d; 想去!</span></div>
								<div class="looking">
									<span class="iconfont">&#xe62f; 123</span>
									<span class="iconfont">&#xe6cb; 123</span>
									<span class="iconfont">&#xe82a; 123</span>
								</div>
							</div>
						</a>
					</div>
				</div>
			<!--hot03  -->
			<div class="hotbox">
				<div class="hottitle">
					<span class="iconfont">&#xe646;热门宿点</span>
					<ul>
						<li class="iconfont" value="1" onclick="oncliktab(this.value)">&#xe67e;景点</li>
						<!-- 
			-->
						<li class="iconfont" value="2" onclick="oncliktab(this.value)">&#xe63f;美食</li>
						<!-- 
			-->
						<li class="iconfont" value="3" onclick="oncliktab(this.value)">&#xe646;酒店</li>
					</ul>
				</div>
				<div class="itembox">
					<a href="">
						<div class="item">
							<img src="https://picsum.photos/360/460?random=10">
							<div class="pname">某某酒店<span class="iconfont">&#xe64d; 订宿</span></div>
							<div class="looking">
								<span class="iconfont">&#xe62f; 123</span>
								<span class="iconfont">&#xe6cb; 123</span>
								<span class="iconfont">&#xe82a; 123</span>
							</div>
						</div>
					</a>
					<a href="">
						<div class="item">
							<img src="https://picsum.photos/360/460?random=12">
							<div class="pname">某某旅馆<span class="iconfont">&#xe64d; 订宿</span></div>
							<div class="looking">
								<span class="iconfont">&#xe62f; 123</span>
								<span class="iconfont">&#xe6cb; 123</span>
								<span class="iconfont">&#xe82a; 123</span>
							</div>
						</div>
					</a>
					<a href="">
						<div class="item">
							<img src="https://picsum.photos/360/460?random=13">
							<div class="pname">某某度假村<span class="iconfont">&#xe64d; 订宿</span></div>
							<div class="looking">
								<span class="iconfont">&#xe62f; 123</span>
								<span class="iconfont">&#xe6cb; 123</span>
								<span class="iconfont">&#xe82a; 123</span>
							</div>
						</div>
					</a>
					
				</div>
			</div>
			</div>
			<!-- 底部 -->
			<div class="bottom">
				<h4>
					一起去旅行吧
				</h4>
			</div>
		</div>
	<script src="js/js.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>
